<template>
  <div>
    <el-row class="warp">
      <el-col :span="24" class="warp-breadcrum">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }"><b>首页</b></el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/enterprise/enterprise_list/' }">机构信息</el-breadcrumb-item>
          <el-breadcrumb-item>机构发票</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>

      <el-col :span="24" class="warp-main" v-loading="loading" element-loading-text="拼命加载中">
        <!--列表-->
        <el-table :data="domainList" highlight-current-row v-loading="loading" style="width: 100%;">
          <el-table-column type="index" width="60">
          </el-table-column>
          <el-table-column prop="invoiceNum" label="发票号码" min-width="100">
          </el-table-column>
          <el-table-column prop="invoiceCode" label="发票代码" min-width="100">
          </el-table-column>
          <el-table-column prop="buyerEnterpriseName" label="购方机构名称" min-width="200">
          </el-table-column>
          <el-table-column prop="buyerTaxNum" label="购方税号" min-width="160">
          </el-table-column>
          <el-table-column prop="bankAcct" label="银行帐号" min-width="200">
          </el-table-column>
          <el-table-column prop="addressTel" label="地址电话" min-width="200">
          </el-table-column>
          <el-table-column prop="printDate" label="开票日期" min-width="100">
          </el-table-column>
          <el-table-column prop="goodsVersion" width="120px" label="商品编码版本号">
          </el-table-column>
          <el-table-column prop="docNum" label="单据号" width="100">
          </el-table-column>
          <el-table-column prop="goodsName" label="商品名称" min-width="160">
          </el-table-column>
          <el-table-column prop="spec" label="规格" width="60">
          </el-table-column>
          <el-table-column prop="unit" label="单位" width="60">
          </el-table-column>
          <el-table-column prop="quantity" label="数量" min-width="60">
          </el-table-column>
          <el-table-column prop="price" label="单价" width="80">
          </el-table-column>
          <el-table-column prop="amount" label="金额" width="80">
          </el-table-column>
          <el-table-column prop="taxAmount" label="税额" min-width="60">
          </el-table-column>
          <el-table-column prop="taxClassCode" label="税收分类编码" min-width="160">
          </el-table-column>
          <el-table-column prop="createDate" label="创建时间" width="140">
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNumber"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="1"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.totalCount">
      </el-pagination>
    </el-row>
  </div>
</template>

<script>
  import domainAPI from '@/api/api_invoice';

  export default {
    data() {
      return {
        invoiceUploadDialogVisible: false,
        headOb: {'authToken': localStorage.getItem('authToken')},
        filters: {
          enterpriseId: '',
          name: ''
        },
        baseUrl: this.$proper.baseUrl,
        page: {
          pageSize: 10,
          pageNumber: 1,
          totalCount: 0
        },
        domainList: [],
        loading: false
      }
    },
    created() {
      let me = this;
      let enterpriseId = me.$route.params.id;
      me.filters.enterpriseId = enterpriseId;

    },
    methods: {
      handleSearch() {
        this.page.totalCount = 0;
        this.page.pageNumber = 1;
        this.search();
      },
      //获取资源列表
      search: function () {
        let that = this;
        let params = {
          name: that.filters.name,
          enterpriseId: that.filters.enterpriseId
        };
        Object.assign(params, this.page)
        that.loading = true;
        domainAPI.qryByPage(params).then(function (result) {
          that.loading = false;
          if (result) {
            that.page.totalCount = result.data.totalCount;
            that.domainList = result.data.result;
          }
        }, function (err) {
          that.loading = false;
          that.$message.error({showClose: true, message: err.toString(), duration: 2000});
        }).catch(function (error) {
          that.loading = false;
          that.$message.error({showClose: true, message: '请求出现异常', duration: 2000});
        });
      },
      handleSizeChange(pageSize) {
        this.page.pageSize = pageSize
        this.search()
      },
      handleCurrentChange(pageNumber) {
        this.page.pageNumber = pageNumber
        this.search()
      },
      submitUpload() {
        this.$refs.upload.submit()
      },
      handleRemove(file, fileList) {
        console.log(file, fileList)
      },
      handlePreview(file) {
        alert(222)
        console.log(file)
      },
      beforeAvatarUpload(file) {
        console.error(file)
        let fileName = file.name
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!this.isElcel(fileName)) {
          this.$message.error('上传文件只能是 xls,xlsx 格式!');
          return false
        }
        if (!isLt2M) {
          this.$message.error('上传文件大小不能超过 2MB!');
          return false
        }
        return true
      },
      isElcel(fileName) {
        var suffix = fileName.substr(fileName.lastIndexOf("."));
        if (".xls" != suffix && ".xlsx" != suffix) {
          return false;
        }
        return true;
      }
    },
    mounted() {
      this.handleSearch()
    }
  }
</script>

<style scoped>

</style>
